<template>
  <div class="modal">
    <a-modal
      v-model:visible="visible"
      title="公告页"
      style="top: 100px"
      :footer="null"
      width="50%"
      :bodyStyle="{ height: '500px' }"
    >
      <a-input-search
        v-model:value="inputValue"
        placeholder="请输入搜索关键字"
        style="width: 200px"
        @search="onSearch"
      />
      <a-table
        :dataSource="dataSource"
        :columns="columns"
        :pagination="pagination"
        @change="handleTableChange"
        :scroll="{ y: 310 }"
      >
        <template v-slot:bodyCell="{ column, record, index }">
          <template v-if="column.key === 'operation'">
            <a-button
              type="primary"
              @click="onClick(record)"
              v-show="!visibledel"
            >
              查看详情
            </a-button>
            <a-popconfirm
              title="是否删除"
              ok-text="确定"
              cancel-text="取消"
              @confirm="confirm"
            >
              <a-button
                type="danger"
                v-show="visibledel"
                @click="onClick(record)"
              >
                删除
              </a-button>
            </a-popconfirm>
          </template>
        </template>
      </a-table>
    </a-modal>
    <a-modal
      v-model:visible="visibleDetail"
      title="详情页"
      style="top: 150px"
      :footer="null"
      @cancel="onCancel"
      width="35%"
      :bodyStyle="{ height: '300px' }"
      class="detail"
    >
      <div style="text-indent: 2em">{{ detalcontent }}</div>
      <span>{{ detailtime }}</span>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, computed, onUnmounted } from 'vue'
import $api from '@/request/api.js'
import mitt from '@/mitt'

/* *****对话框***** */
const visible = ref(false)
const visibleDetail = ref(false)
const visibledel = ref(false)
const id = ref(0)
// 触发事件弹出对话框
const showModal = (e) => {
  if (e === '1') {
    visible.value = true
    visibledel.value = false
  } else {
    visible.value = true
    visibledel.value = true
  }
}
const handlecancel = () => {
  page.value = 1
  size.value = 5
}
const onCancel = () => {
  visible.value = true
  visibleDetail.value = false
}

/* *****搜索框***** */
const inputValue = ref('')
const isSearch = ref(true)
/* *****公告列表***** */
// 表格数据来源及字段名
const dataSource = ref([])
const columns = ref([
  {
    title: '序号',
    dataIndex: 'notice_id',
    key: 'notice_id',
    width: 20,
  },
  {
    title: '公告内容',
    dataIndex: 'notice_content',
    key: 'notice_content',
    ellipsis: true,
    width: 120,
  },
  {
    title: '时间',
    dataIndex: 'notice_time',
    key: 'notice_time',
    width: 40,
  },
  {
    title: '操作',
    key: 'operation',
    width: 30,
  },
])
/* ***表格及分页器参数配置*** */
// 总条数
const total = ref(0)
// 当前页数与每页条数
const pageData = reactive({
  page: 1,
  size: 5,
  content: '',
})
const { page, size, content } = toRefs(pageData)
// 发送请求获取数据
const getNotice = () => {
  isSearch.value = false
  $api.getNotice(pageData).then((res) => {
    const { result } = res
    dataSource.value = result.data
    total.value = result.total
  })
}
// 模糊搜索
const onSearch = () => {
  if (inputValue.value) {
    isSearch.value = true
    content.value = inputValue.value
    $api.getNotice(pageData).then((res) => {
      const { result } = res
      dataSource.value = result.data
      total.value = result.total
    })
  } else {
    content.value = ''
    getNotice()
  }
}

getNotice()
// 配置分页器
const pagination = computed(() => ({
  total: total.value,
  defaultPageSize: size.value,
  showTotal: (total) => `共 ${total} 条`,
  showSizeChanger: true,
  // showQuickJumper: true,跳转窗
  pageSizeOptions: ['5', '10', '20'],
}))
// 页数改变
const handleTableChange = (pagination) => {
  page.value = pagination.current
  size.value = pagination.pageSize
  if (isSearch.value == false) {
    getNotice()
  } else {
    onSearch()
  }
}

const detalcontent = ref('')
const detailtime = ref('')
// 查看详情
const onClick = (e) => {
  if (visibledel.value == false) {
    visible.value = false
    visibleDetail.value = true
    detalcontent.value = e.notice_content
    detailtime.value = e.notice_time
  } else {
    id.value = e.notice_id
  }
}

const confirm = () => {
  $api.deleteNotice(id.value).then((res) => {
    getNotice()
  })
}

// 事件监听与解绑
mitt.on('showModal', showModal)
onUnmounted(() => {
  mitt.off('showModal', showModal)
})
</script>

<style lang="stylus" scoped>
.detail
  div
    width: 100%
    height: 240px
    font-family:'仿宋'
    font-size:15px
.detail
  span
    float: right
</style>
